<template>
    <div>
        <div class="container">
            <div class="handle-box">
                <span style="padding: 8px">红娘姓名：</span>
                <el-input v-model="query.name" placeholder="红娘姓名" class="handle-input mr10"></el-input>
                <span style="padding: 8px"></span>
                <span style="padding: 8px">红娘电话：</span>
                <el-input v-model="query.mobile" placeholder="红娘电话" type="number" class="handle-input mr10"></el-input>
                <span style="padding:8px;">红娘状态：</span>
                <el-select v-model="query.status"  @change="initAjaxMethod" placeholder="请选择">
                    <el-option label="全部" :value="-1"></el-option>
                    <el-option label="待审核" :value="0"></el-option>
                    <el-option label="未支付" :value="2"></el-option>
                    <el-option label="已支付" :value="3"></el-option>
                </el-select>
                <span style="padding: 8px"></span>
                <el-button type="success" icon="el-icon-search" size="medium" @click="handleSearch">搜索</el-button>
                <el-button type="warning" size="medium" icon="el-icon-refresh-left" @click="resultClick()">重置</el-button>
            </div>
            <el-table
                :data="tableData"
                border
                ref="multipleTable"
                header-cell-class-name="table-header"
            >
                <el-table-column label="序号" align="center" width="100" fixed>
                    <template slot-scope="scope">{{ scope.$index + (query.pageIndex - 1) * query.pageSize + 1 }}</template>
                </el-table-column>
                <el-table-column label="姓名" align="center">
                    <template slot-scope="scope">{{ scope.row.nickname }}</template>
                </el-table-column>
                <el-table-column label="电话" align="center">
                    <template slot-scope="scope">{{ scope.row.mobile }}</template>
                </el-table-column>
                <el-table-column label="级别" align="center">
                    <template slot-scope="scope">{{ scope.row.title }}</template>
                </el-table-column>
                <el-table-column label="金额" align="center">
                    <template slot-scope="scope">{{ scope.row.price }}</template>
                </el-table-column>
                <el-table-column label="推荐会员" align="center">
                    <template slot-scope="scope">{{ scope.row.member_total || 0}}人</template>
                </el-table-column>
                <el-table-column label="推荐红娘" align="center">
                    <template slot-scope="scope">{{ scope.row.atchmaker_total || 0}}人</template>
                </el-table-column>
                <el-table-column label="收益" align="center">
                    <template slot-scope="scope">¥{{ scope.row.amount_total || '0.00'}}</template>
                </el-table-column>
                <el-table-column label="提现" align="center">
                    <template slot-scope="scope">¥{{ scope.row.tx_total  || '0.00'}}</template>
                </el-table-column>
                <el-table-column label="余额" align="center">
                    <template slot-scope="scope">¥{{ (scope.row.amount_total-scope.row.tx_total)  || '0.00'}}</template>
                </el-table-column>
                <el-table-column label="是否系统红娘" align="center">
                    <template slot-scope="scope">
                        <span v-if="scope.row.is_super == 0">否</span>
                        <span v-if="scope.row.is_super == 1">是</span>
                    </template>
                </el-table-column>
                <el-table-column label="推荐人" align="center">
                    <template slot-scope="scope">{{ scope.row.tj_nickname }}</template>
                </el-table-column>
                <el-table-column label="红娘状态" align="center">
                    <template slot-scope="scope">
                        <span v-if="scope.row.status == 0">待审核</span>
                        <span v-if="scope.row.status == 2">未支付</span>
                        <span v-if="scope.row.status == 3">已支付</span>
                    </template>
                </el-table-column>
                <el-table-column label="记录操作" width="200" align="center">
                    <template slot-scope="scope">
                        <el-button @click="openList(scope.row,1)" type="text" size="small">推荐红娘</el-button>
                        <el-button @click="openList(scope.row,2)" type="text" size="small">推荐会员</el-button>
                        <el-button @click="openList(scope.row,3)" type="text" size="small">收益记录</el-button>
                    </template>
                </el-table-column>
                <el-table-column label="红娘操作" width="200" align="center">
                    <template slot-scope="scope" v-if="scope.row.is_super == 0">
                        <el-button @click="createUser(scope.row,'1',index)" type="text" size="small" v-if="scope.row.status == 0">审核通过</el-button>
                        <el-button @click="createUser(scope.row,'2',index)" type="text" size="small">查看详情</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination
                    background
                    layout="total, prev, pager, next"
                    :current-page="query.pageIndex"
                    :page-size="query.pageSize"
                    :total="pageTotal"
                    @current-change="handlePageChange"
                ></el-pagination>
            </div>
        </div>
        <!-- 编辑弹出框 -->
        <el-dialog title="会员详情" :visible.sync="dialog" width="60%" > 
            <el-form class="demo-form-inline" :label-position="'left'">
            <el-form-item label="头像">
                <el-image style="width: 50px; height: 50px" :src="baseImgUrl+(formInline.headimgurl || formInline.avatarUrl)" fit="contain"></el-image>
            </el-form-item>
            <el-form-item label="姓名">
                <el-input v-model="formInline.nickname" readonly></el-input>
            </el-form-item>
            <el-form-item label="电话">
                <el-input v-model="formInline.mobile" readonly></el-input>
            </el-form-item>
            <el-form-item label="性别">
                <span v-if="formInline.sex==1">男</span>
                <span v-if="formInline.sex==2">女</span>
            </el-form-item>
            <el-form-item label="身高cm">
                <el-input v-model="formInline.height" readonly></el-input>
            </el-form-item>
            <el-form-item label="体重kg">
                <el-input v-model="formInline.weight" readonly></el-input>
            </el-form-item>
            <el-form-item label="学历">
                <el-input v-model="formInline.education" readonly></el-input>
            </el-form-item>
            <el-form-item label="毕业院校">
                <el-input v-model="formInline.school" readonly></el-input>
            </el-form-item>
            <el-form-item label="现居地">
                <el-input v-model="formInline.city" readonly></el-input>
            </el-form-item>
            <el-form-item label="家乡">
                <el-input v-model="formInline.home" readonly></el-input>
            </el-form-item>
            <el-form-item label="毕业状态">
                <el-input v-model="formInline.graduation_status" readonly></el-input>
            </el-form-item>
            <el-form-item label="是否购车">
                <el-input v-model="formInline.vehicle" readonly></el-input>
            </el-form-item>
            <el-form-item label="房产情况">
                <el-input v-model="formInline.property_situation" readonly></el-input>
            </el-form-item>
            <el-form-item label="年收入情况">
                <el-input v-model="formInline.income" readonly></el-input>
            </el-form-item>
            <el-form-item label="是否吸烟">
                <el-input v-model="formInline.smoke" readonly></el-input>
            </el-form-item>
            <el-form-item label="是否喝酒">
                <el-input v-model="formInline.drink" readonly></el-input>
            </el-form-item>
            <el-form-item label="职业">
                <el-input v-model="formInline.career" readonly></el-input>
            </el-form-item>
            <el-form-item label="婚姻状况">
                <el-input v-model="formInline.marriage" readonly></el-input>
            </el-form-item>
            <el-form-item label="照片墙">
                <el-image v-for="(item,index) in formInline.photo_wall" :key="index" style="width: 80px; height: 100px" :src="baseImgUrl+item.url" fit="contain"></el-image>
            </el-form-item>
            <el-form-item label="自我描述">
                <el-input type="textarea" :rows="4" v-model="formInline.self_description" readonly></el-input>
            </el-form-item>
            <el-form-item label="兴趣还好">
                <el-input type="textarea" :rows="4" v-model="formInline.interest" readonly></el-input>
            </el-form-item>
            <el-form-item label="爱情观">
                <el-input type="textarea" :rows="4" v-model="formInline.view_point_love" readonly></el-input>
            </el-form-item>
            <el-form-item label="理想的另一半">
                <el-input type="textarea" :rows="4" v-model="formInline.ideal_partner" readonly></el-input>
            </el-form-item>
            <el-form-item label="身份证号码">
                <el-input v-model="formInline.credential_id" readonly></el-input>
            </el-form-item>
            <el-form-item label="毕业证书">
                <el-image style="width: 120px; height: 50px" :src="baseImgUrl+formInline.diploma_img" fit="contain"></el-image>
            </el-form-item>
            <el-form-item label="社保图片">
                <el-image style="width: 120px; height: 50px" :src="baseImgUrl+formInline.social_security_img" fit="contain"></el-image>
            </el-form-item>
            <el-form-item label="单身证明">
                <el-image style="width: 120px; height: 50px" :src="baseImgUrl+formInline.is_single_img" fit="contain"></el-image>
            </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button size="medium" type="primary" @click="dialog=false">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 核销弹出框 -->
        </el-dialog>
        <!-- 服务卡详情 -->
        <el-dialog title="推荐会员记录" :visible.sync="dialog1" width="50%">
            <el-table
                :data="tableData1"
                border
                ref="multipleTable"
                header-cell-class-name="table-header"
            >
                <el-table-column label="序号" align="center" width="100" fixed>
                    <template slot-scope="scope">{{ scope.$index+ 1 }}</template>
                </el-table-column>
                <el-table-column label="会员名称" align="center">
                    <template slot-scope="scope">{{scope.row.nickname || scope.row.wechat_nickname}}</template>
                </el-table-column>
                <el-table-column label="会员手机" align="center">
                    <template slot-scope="scope">{{scope.row.mobile}}</template>
                </el-table-column>
                <el-table-column label="会员状态" align="center">
                    <template slot-scope="scope">
                        <span v-if="scope.row.status==0">游客</span>
                        <span v-if="scope.row.status==1">资料已填写</span>
                        <span v-if="scope.row.status==2">审核通过</span>
                    </template>
                </el-table-column>
            </el-table>
        </el-dialog>
        <!-- 充值记录 -->
        <el-dialog title="推荐红娘记录" :visible.sync="dialog2" width="50%">
            <el-table
                :data="tableData2"
                border
                ref="multipleTable"
                header-cell-class-name="table-header"
            >
                <el-table-column label="序号" align="center" width="100" fixed>
                    <template slot-scope="scope">{{ scope.$index+ 1 }}</template>
                </el-table-column>
                <el-table-column label="红娘名称" align="center">
                    <template slot-scope="scope">{{scope.row.nickname}}</template>
                </el-table-column>
                <el-table-column label="红娘手机" align="center">
                    <template slot-scope="scope">{{scope.row.mobile}}</template>
                </el-table-column>
                <el-table-column label="会员状态" align="center">
                    <template slot-scope="scope">
                        <span v-if="scope.row.status == 0">待审核</span>
                        <span v-if="scope.row.status == 2">未支付</span>
                        <span v-if="scope.row.status == 3">已支付</span>
                    </template>
                </el-table-column>
            </el-table>
        </el-dialog>
        <!-- 消费记录 -->
        <el-dialog title="红娘收益记录" :visible.sync="dialog3" width="50%">
            <el-table
                :data="tableData3"
                border
                ref="multipleTable"
                header-cell-class-name="table-header"
            >
                <el-table-column label="序号" align="center" width="100" fixed>
                    <template slot-scope="scope">{{ scope.$index + 1 }}</template>
                </el-table-column>
                <el-table-column label="订单编号" align="center">
                    <template slot-scope="scope">{{ scope.row.order_num }}</template>
                </el-table-column>
                <el-table-column label="订单金额" align="center">
                    <template slot-scope="scope">{{ scope.row.order_fee }}</template>
                </el-table-column>
                <el-table-column label="收益金额" align="center">
                    <template slot-scope="scope">{{ scope.row.amount }}</template>
                </el-table-column>
                <el-table-column label="收益类型" align="center">
                    <template slot-scope="scope">
                        <span v-if="scope.row.type == 0">邀请红娘</span>
                        <span v-if="scope.row.type == 1">会员卡消费</span>
                    </template>
                </el-table-column>
            </el-table>
        </el-dialog>
    </div>
</template>

<script>
import api from '@/api/index';
import { getdate, getdate1 } from '@/utils/utils';
export default {
    name: 'serviceAccount',
    data() {
        return {
            activeName: '1',
            write_type: '1',
            recharge_type: '1',
            writere_charge_type: '1',
            loading: false,
            WriteOff: false,
            wash_protect_num_total: 0,
            dialogTitle: '',
            dialog: false,
            dialog1: false,
            dialog2: false,
            dialog3: false,
            formInline: {},
            submitDisabled: false,
            baseImgUrl:api.IMG_PATH,
            pageTotal: 0,
            writeData: {},
            write_amount_value: 0,
            write_card_num: 0,
            write_integral_num: 0,
            cardList: [],
            storedList: [],
            serverList: [],
            exhib_id: '',
            delIdArr: [],
            amountValue: '',
            amountIndex: '',
            query: {
                mobile: '',
                name: '',
                pageIndex: 1,
                status: -1,
                pageSize: 10
            },
            tableData: [],
            tableData1: [],
            tableData2: [],
            tableData3: [],
            tableData4: [],
            multipleSelection: [],
            delList: [],
            addOrEdit: 1,
            itemId: '',
            pavilion_id: '',
            exhibitionLists: []
        };
    },
    filters: {
        toFixedFile: function (val) {
            if (!val) return '0.00';
            return Number(val).toFixed(2);
        },
        formDate: (val) => {
            if (!val) return '';
            return getdate(val);
        },
        formDate1: (val) => {
            if (!val) return '';
            return getdate1(val);
        }
    },
    created() {
        this.initAjaxMethod();
    },
    methods: {
        changeTypes(e) {
            this.submit_type = e;
        },
        changeWriteTypes(e) {
            this.write_type = e;
        },
        czMethod() {
            let { gift_amount, card_price, id } = this.storedList[this.amountIndex];
            let amount = Number(gift_amount) + Number(card_price);
            let amounts = typeof amount === 'number' && !isNaN(amount) && amount > 0 ? amount : 0;
            this.modelList.amount.value = amounts;
            this.modelList.stored_id.value = id;
        },
        setczMethod() {
            this.modelList.amount.value = this.amountValue;
        },
        //重置
        resultClick() {
            this.query.name = '';
            this.query.mobile = '';
            this.query.pageIndex = 1;
            this.query.status = -1;
            this.initAjaxMethod();
        },
        //新增
        createMethod() {
            for (let i in this.modelList) {
                this.modelList[i].value = '';
            }
            this.amountValue = '';
            this.amountIndex = '';
            this.wash_protect_num_total = 0;
            this.addOrEdit = 1;
            this.submit_type = '1';
            this.submitDisabled = false;
            this.dialogTitle = '新增用户';
            this.dialog = true;
        },
        createUser(data, flag,index) {
            if (flag == 1) {
                this.$http.post(api.USERS_CHECK,{matchmaker_id:data.id}).then((res) => {
                    if (res.code == 1) {
                        this.$message.success('操作成功')
                        this.tableData[index].status=2;
                        this.dialog=true;
                    }
                });
            }else{
                 this.$http.post(api.ATCHMAKER_DETAIL,{matchmaker_id:data.id}).then((res) => {
                    if (res.code == 1) {
                        this.formInline =res.data;
                        this.dialog=true;
                    }
                });
            }
        },
        // 编辑操作
        handleEdit(row) {
            console.log(row);
            this.addOrEdit = 2;
            this.itemId = row.id;
            this.modelList.exhibition_id.value = row.exhibition_id;
            this.modelList.title.value = row.title;
            this.modelList.address.value = row.address;
            this.modelList.area.value = row.area;
            this.modelList.link.value = row.link;
            this.modelList.contact.value = row.contact;
            this.modelList.mobile.value = row.mobile;
            this.modelList.wash_protect_num_total.value = row.mobile;
            this.dialog = true;
            this.dialogTitle = '编辑用户';
        },
        // 保存编辑
        saveEdit() {
            if (this.addOrEdit == 1) {
                this.addAjaxMethod();
            } else {
                this.editAjaxMethod();
            }
        },
        // 删除操作
        handleDelete(row) {
            // 二次确认删除
            this.$confirm('确定要删除吗？', '提示', {
                type: 'warning'
            })
                .then(() => {
                    this.delIdArr = [row.id];
                    this.delAjaxMethod();
                })
                .catch(() => {});
        },
        //列表加载
        initAjaxMethod() {
            const loading = this.$loading({ text: '加载中...' });
            this.$http
                .post(api.SERVICE_ACCOUNT_INDEX, {
                    pageIndex: this.query.pageIndex,
                    name: this.query.name,
                    status: this.query.status,
                    mobile: this.query.mobile,
                    pageSize: this.query.pageSize
                })
                .then((res) => {
                    loading.close();
                    console.log('展馆列表', res);
                    if (res.code == 1) {
                        this.tableData = res.data.list;
                        this.pageTotal = res.data.total;
                    } else {
                        this.$message.error(res.msg);
                    }
                })
                .catch((err) => {
                    this.$message.error(err.msg);
                });
        },
        //新增api
        addAjaxMethod() {
            //验证
            let test = this.testMethod();
            if (!test.flag) {
                this.$message.error(test.msg);
                return false;
            }
            const loading = this.$loading({ text: '加载中...' });
            this.$http
                .post(api.USERS_ADD, test.data)
                .then((res) => {
                    loading.close();
                    console.log('管理员列表', res);
                    if (res.code == 1) {
                        this.$message.success('保存成功');
                        this.dialog = false;
                        this.initAjaxMethod();
                    } else {
                        this.$message.error(res.msg);
                    }
                })
                .catch((err) => {
                    this.$message.error(err.msg);
                });
        },
        //删除api
        delAjaxMethod() {
            const loading = this.$loading({ text: '加载中...' });
            this.$http
                .post(api.SERVICE_ACCOUNT_DEL, { id: this.delIdArr.join(',') })
                .then((res) => {
                    loading.close();
                    console.log('管理员列表', res);
                    if (res.code == 1) {
                        this.$message.success('删除成功');
                        this.initAjaxMethod();
                    } else {
                        this.$message.error(res.msg);
                    }
                })
                .catch((err) => {
                    this.$message.error(err.msg);
                });
        },
        // 触发搜索按钮
        handleSearch() {
            this.$set(this.query, 'pageIndex', 1);
            this.initAjaxMethod();
        },
        // 分页导航
        handlePageChange(val) {
            this.$set(this.query, 'pageIndex', val);
            this.initAjaxMethod();
        },
        openList(data, flag) {
            // 推荐红娘
            if (flag == 1) {
                this.$http.post(api.USERS_GET_SERVER_DETAIL, { matchmaker_id: data.id }).then((res) => {
                    if (res.code == 1) {
                        this.tableData1 = Array.isArray(res.data) ? res.data : [];
                        this.dialog1 = true;
                    }
                });
                // 推荐会员
            } else if (flag == 2) {
                this.$http.post(api.USERS_CANCELLATION, { matchmaker_id: data.id }).then((res) => {
                    if (res.code == 1) {
                        this.tableData2 = Array.isArray(res.data) ? res.data : [];
                        this.dialog2 = true;
                    }
                });
                // 收益记录
            } else if (flag == 3) {
                this.$http.post(api.USERS_PURCHASE_HISTORY, { matchmaker_id: data.id }).then((res) => {
                    if (res.code == 1) {
                        this.tableData3 = Array.isArray(res.data) ? res.data : [];
                        this.dialog3 = true;
                    }
                });
            }
        }
    }
};
</script>

<style scoped>
.handle-box {
    margin-bottom: 20px;
}
.handle-input {
    width: auto;
    display: inline-block;
}
.mr10 {
    margin-right: 10px;
}
.table {
    width: 100%;
}
.red {
    color: #f56c6c;
}
.list-title {
    height: 32px;
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #333;
}
.list-group {
    padding: 10px 0;
}
.demo-drawer__content {
    margin: 0 auto;
    width: 80%;
    border: 1px solid #fafafa;
}
</style>
